<template>
  <div class="dynamicmanagement">
    <el-table
      :data="dyData"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#f8f8f9' }"
    >
      <el-table-column prop="id" label="序号" align="center" width="50px">
      </el-table-column>
      <el-table-column align="center" label="内容">
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="发布状态" width="80px">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.visibility" @change="changeValue($event, scope.row.id)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="点赞数" width="80px">
        <template slot-scope="scope">
          {{ scope.row.start }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="创建时间"
        width="170px"
      >
      </el-table-column>
      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="toEdit(scope.row.id)">
            <i class="el-icon-edit"></i> 修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="removeDynamic(scope.row.id)"
          >
            <i class="el-icon-delete"></i> 删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 导入接口
import { getDynamicAPI, deleteDynamicAPI, updateVbAPI } from '@/API/api'
export default {
  name: 'Dynamicmanagement',
  data() {
    return {
      // 表格数据
      dyData: []
    }
  },
  methods: {
    // 获取动态信息列表
    async getDynamic() {
      try {
        const { data: res } = await getDynamicAPI()
        if (res.status !== 0) return this.$message.warning(res.msg)
        res.data.map((item) => {
          item.visibility = item.visibility === '1'
          return item
        })
        this.dyData = res.data
        // console.log(this.dyData)
      } catch (error) {
        console.log(error)
      }
    },
    // 删除动态
    async removeDynamic(id) {
      const that = this
      this.$confirm('此操作将永久删除该动态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        async callback(actions) {
          if (actions !== 'confirm') return this.$message.warning('已取消删除!')
          try {
            const { data: res } = await deleteDynamicAPI(id)
            // console.log(res)
            if (res.status !== 0) return that.$message.error(res.msg)
            that.$message.success(res.msg)
            that.getDynamic()
          } catch (error) {
            console.log(error.message)
          }
        }
      })
    },
    // 跳转到修改页面
    toEdit(id) {
      this.$router.push({
        name: 'updateDynamic',
        params: {
          id
        }
      })
    },
    // switch 开关的值发生变化触发事件的事件处理函数
    async changeValue(newVal, id) {
      try {
        const { data: res } = await updateVbAPI(id, newVal)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        this.getDynamic()
      } catch (error) {
        console.log(error.message)
      }
      console.log(newVal)
      console.log(id)
    }
  },
  created() {
    this.getDynamic()
  }
}
</script>

<style lang="less" scoped>
.dynamicmanagement {
  padding: 20px 20px 0;
}
</style>
